<template>
  <div>
    <el-form ref="form" label-width="80px" :model="skuForm">
      <el-form-item label="SPU名称">{{spu.spuName}}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuForm.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input type="number" v-model="skuForm.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input type="number" v-model="skuForm.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" v-model="skuForm.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item :label="attr.attrName" v-for="(attr,index) in attrList" :key="attr.id">
            <el-select v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in saleAttrList" :key="saleAttr.id">
            <el-select v-model="saleAttr.saleAttrIdAndValueId">
              <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table style="width: 100%" border :data="imageList" @selection-change="changeHandler">
          <el-table-column type="selection" label="label" width="80">
          </el-table-column>
          <el-table-column prop="prop" label="图片">
             <template slot-scope="{row,$index}">
                 <img :src="row.imgUrl" alt="" style="width:100px;height:100px">
             </template>
          </el-table-column>
          <el-table-column prop="prop" label="名称"> 
             <template slot-scope="{row,$index}">
                <span>{{row.imgName}}</span>
             </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作"> 
             <template slot-scope="{row,$index}">
                <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设为默认</el-button>
                <el-button type="success" v-else>默认</el-button>
             </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //平台属性
      attrList: [],
      //销售属性
      saleAttrList: [],
      //图片列表
      imageList: [],
      //收集数据
      skuForm: {
        //父组件给的
        category3Id: 0,//三级分类的id
        tmId: 0, //品牌的id
        spuId: 0,//类的id
        //v-model
        skuName: "",//实例的名字
        price: "", //价格
        weight: "", //重量
        skuDesc: "",//描述
        skuDefaultImg: "",//默认图片
        //稍微书写逻辑收集到---平台属性
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   valueId: 0,
          // },
        ],
        //图片列表
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: "string",
          //   imgUrl: "string",
          //   isDefault: "string",
          //   skuId: 0,
          //   spuImgId: 0,
          // },
        ],
        //销售属性
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: "string",
          //   saleAttrValueId: 0,
          //   saleAttrValueName: "string",
          //   skuId: 0,
          //   spuId: 0,
          // },
        ],
      },
      //获取父组件给的这个类的信息
      spu:{},
    };
  },
  methods: {
    //子组件初始化数据
    async initData(category1Id, category2Id, spu) {
      //收集父组件给的数据
      this.skuForm.category3Id = spu.category3Id;
      this.skuForm.tmId = spu.tmId;
      this.skuForm.spuId = spu.id;
      this.spu = spu;
      //获取平台属性的方法
      let promise1 = this.$API.attr.reqAttrList(
        category1Id,
        category2Id,
        spu.category3Id
      );
      //获取销售属性
      let promise2 = this.$API.spu.reqSpuSaleAttrList(spu.id);
      //获取图片列表
      let promise3 = this.$API.spu.reqSpuImageList(spu.id);
      try {
        let result = await Promise.all([promise1, promise2, promise3]);
        //平台属性
        this.attrList = result[0].data;
        //销售属性
        this.saleAttrList = result[1].data;
        //图片列表
        let imgList = result[2].data;
        imgList.forEach(item=>{
           //是不是响应式数据
           item.isDefault = 0;
        });
        //数组的替换：vue框架能检测到数据变化
        this.imageList = imgList;

      } catch (error) {}
    },
    //排他操作
    changeDefault(row){
     //先把全部图片default = 0 
     this.imageList.forEach(item=>{
       item.isDefault = 0;
     });
     //点击的图片为1
     row.isDefault = 1;
     //收集默认图片的地址
     this.skuForm.skuDefaultImg = row.imgUrl;
    },
    //收集选中的图片
    changeHandler(params){
       this.skuForm.skuImageList = params;
    },
    cancel(){
      //通知父亲切换场景
      this.$emit('changeScene',{scene:0,flag:''});
      //清空数据
      Object.assign(this._data,this.$options.data());
    },
    async save(){
      //整理参数
      //整理平台属性
      this.skuForm.skuAttrValueList= this.attrList.reduce((pre,cur)=>{
            //代表用户选择平台属性当中某一个数值
           if(cur.attrIdAndValueId){
             const [attrId,valueId]  =  cur.attrIdAndValueId.split(':');
             //将来带个服务器对象
             let attrObj = {attrId,valueId};
             //添加到数组里面
             pre.push(attrObj);
           }
           return pre;
      },[]);
     //整理销售属性
     this.skuForm.skuSaleAttrValueList= this.saleAttrList.reduce((pre,cur)=>{
        if(cur.saleAttrIdAndValueId){
            const [saleAttrId,saleAttrValueId] = cur.saleAttrIdAndValueId.split(':');
            let saleObj = {saleAttrId,saleAttrValueId};
            pre.push(saleObj);
        }
        return pre;
     },[]);

    try {
      await this.$API.spu.reqAddSku(this.skuForm);
      this.$message({type:'success',message:'保存成功'});
      this.$emit('changeScene',{scene:0,flag:''});
      Object.assign(this._data,this.$options.data());
    } catch (error) {
      
    }

    }
  },
};
</script>

<style scoped>
</style>
